<template>
  <div>
    <el-dialog class="bg-white-dialog" :visible.sync="showDialog" width="1120px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div slot="title" class="flex justify-between align-center">
        <span class="color-333333 font-size-24 font-weight-700">{{ sourceData.dialogTitle }}</span>
        <span class="color-333333 padding-right-30">单位：万元</span>
      </div>

      <div class="margin-bottom-20">
        <div class="font-size-16 font-weight-600 margin-bottom-5">计划：{{ sourceData.planAmount | moneyFilterNoUnit }}</div>
        <div class="font-size-16 font-weight-600 margin-bottom-5">实际执行：{{ sourceData.executionAmount | moneyFilterNoUnit }}</div>
        <div class="font-size-16 font-weight-600 margin-bottom-5" v-if="deviationRate == '--' || deviationRate == '计划外'">差异：{{ sourceData.differenceAmount | moneyFilterNoUnit }}（{{ deviationRate }}）</div>
        <div class="font-size-16 font-weight-600 margin-bottom-5" v-else>
          差异： <span class="font-size-16 font-weight-600" :class="monthAmountColor(sourceData.differenceAmount)">{{ sourceData.differenceAmount | moneyFilterNoUnit }}（{{ sourceData.difference | accMul }}%）</span>
        </div>
      </div>

      <template v-if="pageType == 'groupMonth'">
        <el-table class="has-bg new-table-style" :data="tableData.slice(0, 1)" style="width: 100%" :show-header="true" :border="true">
          <el-table-column align="center" label="资产" :min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.itemName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-for="(item, index) in columnList" :key="`item${index}`" :label="item" align="center">
            <template slot-scope="scope">
              <span :class="monthAmountColor(scope.row[item])">{{ scope.row[item] }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-table class="margin-top-10 new-table-style" :data="tableData.slice(1)" style="width: 100%" 
                  :show-header="false" :border="true" @row-click="goInfo">
          <el-table-column align="center" label="资产" :min-width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.itemName }}</span>
            </template>
          </el-table-column>
          <el-table-column v-for="(item, index) in columnList" :key="`item${index}`" :label="item" align="center">
            <template slot-scope="scope">
              <span :class="monthAmountColor(scope.row[item])">{{ scope.row[item] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template v-if="pageType == 'projectMonth'">
        <el-table class="has-bg new-table-style" :data="tableData.slice(0, 1)" style="width: 100%" :show-header="true" :border="true">
          <el-table-column align="left">
            <template #header>
              <span class="p-l-l">事项</span>
            </template>
            <template slot-scope="scope">
              <span class="p-l-l">{{ scope.row.itemName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left">
            <template #header>
              <span class="p-l-l">差异</span>
            </template>
            <template slot-scope="scope">
              <span class="p-l-l" :class="monthAmountColor(scope.row.differenceAmount)">{{ scope.row.differenceAmount }}</span>
            </template>
          </el-table-column>
        </el-table>

        <el-table class="margin-top-10 new-table-style" :data="tableData.slice(1)" style="width: 100%" :show-header="false" :border="true">
          <el-table-column align="left">
            <template slot-scope="scope">
              <span class="p-l-l">{{ scope.row.itemName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left">
            <template slot-scope="scope">
              <span class="p-l-l" :class="monthAmountColor(scope.row.differenceAmount)">{{ scope.row.differenceAmount }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import { apiRentalRateDetail } from '@a/about';
  import dayjs from 'dayjs';
  import $ from 'jquery';

  export default {
    props: {
      sourceData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //operate:经营性 noOperate:非经营性
      operateType: {
        type: String,
        default: '',
      },
      // 支出还是收入
      isIncome: {
        type: Boolean,
        default: false,
      },
      // groupYear: 集团年度, groupMonth: 集团月度,  projectYear: 项目年度, projectMonth: 项目月度
      pageType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        showDialog: false,
        columnList: [],
        tableData: [],
      };
    },

    computed: {
      colorClass() {
        return function (val) {
          if (this.isIncome) {
            return val > 0 ? 'color-green' : 'color-red';
          } else {
            return val > 0 ? 'color-red' : 'color-green';
          }
        };
      },
      deviationRate() {
        if (this.sourceData.executionAmount == 0 && this.sourceData.planAmount == 0) {
          return '--';
        } else if (Number(this.sourceData.executionAmount) != 0 && this.sourceData.planAmount == 0) {
          return '计划外';
        }
      },
    },

    watch: {
      sourceData: {
        deep: true,
        handler(val) {
          this.pageType == 'groupMonth' && this.groupMonthData(val);
          this.pageType == 'projectMonth' && this.projectMonthData(val);
        },
      },
    },

    methods: {
      /************
        集团计划：集团行不跳  项目行跳项目
        项目计划：全都不跳
        集团月报：只点击年度预算列跳转对应的收入支出页 （集团跳集团 项目跳项目），项目行跳对应项目的收入支出页
        项目月报：只点击年度预算列跳转对应项目的收入支出页
      **********/
      goInfo(row) {
        let pathName = this.isIncome ? 'execute-income-plan' : 'execute-pay-plan';
        let queryData = {
          year: this.$route.query.year || '',
          manage: this.operateType,
          classifyKey: 'month',
          headerName: '项目月报',
          projectKey: row.itemKey,
          month: this.$route.query.month,
          planProjectName: row.itemName,
        };

        let pathUrl = {
          name: pathName,
          query: queryData,
        };

        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },
      monthAmountColor(value) {
        if (this.isIncome) {
          return value > 0 ? 'color-green' : value < 0 ? 'color-red' : 'color-333333';
        } else {
          return value < 0 ? 'color-green' : value > 0 ? 'color-red' : 'color-333333';
        }
      },
      //集团月报的table数据
      groupMonthData(sourceData) {
        this.columnList = [];
        this.tableData = [];
        let list = [];
        let differenceList = sourceData.differenceList;
        let projectList = differenceList[0].projectList;

        projectList.forEach(item => {
          list.push({
            itemName: item.itemName,
          });
        });
        differenceList.forEach(source => {
          this.columnList.push(source.chargeItemName);
          list.forEach(item => {
            item[source.chargeItemName] = this.getAmount(item.itemName, source.projectList);
          });
        });

        this.tableData = list;
      },

      //项目月报的table数据
      projectMonthData(sourceData) {
        for (let i = sourceData.detailList.length - 1; i >= 0; i--) {
          if (!sourceData.detailList[i].differenceAmount) {
            sourceData.detailList.splice(i, 1);
          }
        }
        this.tableData = sourceData.detailList || [];
      },

      getAmount(projectname, list) {
        let obj = list.find(item => item.itemName == projectname);
        return obj.differenceAmount;
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-table {
    .cell {
      padding: 0 !important;
      cursor: pointer;
    }
  }

  ::v-deep .has-bg {
    .el-table__body-wrapper {
      .el-table__row {
        background: rgba(51, 132, 254, 0.2);

        .el-table__cell .cell {
          cursor: default;
        }
      }
    }
  }

  ::v-deep .el-dialog__close {
    margin-top: 4px;
  }

  .p-l-l {
    padding-left: 230px;
  }
  .p-r-l {
    padding-right: 230px;
  }
</style>
